<template>
<div style="background:#001529;height: 100%;width: 100%;display: flex;">

  <a-card class="card">
    <a-form
      :model="formState"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      autocomplete="off"
      class="form">
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: '请输入用户名!' }]">
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]">
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit" @click="login">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</div>
</template>

<script setup>
import CryptoJS from "crypto-js";
import { ref } from "vue";
import * as request from "../api/request"
const props = defineProps({
  logined: Boolean,
});

const emits = defineEmits(["update:logined","logined"]);

const formState = ref({
  username: "",
  password: "",
});

function login() {
  if (formState.value.username == "" || formState.value.password == "") {
    return;
  }
  //CryptoJS.SHA256(formState.value.password).toString()//TODO 理论上密码要Hash
  request.login(formState.value.username,formState.value.password)
  .then((res) => {
    if(res.data.token){
      console.log(res.data);
      localStorage["userInfo"] = JSON.stringify(res.data);
      request.updateToken(res.data.token)
      emits("update:logined", true);
      emits("logined",res.data);
    }else{
      console.log('登录失败',res.data);
      alert(res.data);
    }
  })
  .catch((err) => {
    console.log(err);
    alert(err.response.data.msg);
  });
}
</script>

<style scoped>
.card{
  width: 600px;
  margin: auto;
  border-radius: 24px;
  border: 0px;
  background: #ffffffba;
  /* box-shadow: 0 1px 2px -2px #ffffffc9,
              0 3px 6px #ffffffdf,
              0 5px 12px 4px #ffffffd7; */
}
.form{
  display:flex;
  flex-direction:column;
  align-items: center;
  margin-top: 32px;
}
</style>